<template>
  <BaseCard class="h-full" :showHeadBorder="false">
    <template #header>
      <div class="flex">
        <span class="title">科研统计</span>
      </div>
    </template>
    <div class="h-[270px]">
      <el-row :gutter="5">
        <el-col :span="12">
          <chart :option="option" height="270px" />
        </el-col>
        <el-col :span="12">
          <!-- <chart :option="option1" height="270px" /> -->
          <chart :option="option3" height="270px" />
        </el-col>
      </el-row>
    </div>
  </BaseCard>
</template>

<script setup>
import BaseCard from "./BaseCard.vue";
import * as homeApi from "@/api/home/index";
import chart from "@/components/chart/index";
const option = ref({
  title: {
    text: "各类项目立项数量",
    left: "center",
    // top:20,
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
  },
  legend: {
    orient: "vertical",
    left: "right",
    align: "left",
    top: 20,
    itemWidth: 30,
    itemHeight: 10,
    data: ["项目类型"],
    textStyle: {
      color: "#6E7079",
    },
  },
  grid: {
    show: false,
    left: 40,
    top: 60,
    bottom: 20,
    right: 0,
  },
  tooltip: {
    show: true,
  },
  xAxis: {
    splitLine: {
      show: false, //分割线
    },
    axisLine: {
      show: false, //坐标轴
    },
    axisTick: {
      show: false, //坐标刻度
    },
    data: ["纵向项目", "横向项目", "校级项目"],
  },
  yAxis: {
    name: "(项)",
    splitLine: {
      show: true,
    },
  },
  series: [
    {
      name: "项目类型",
      type: "bar",
      barGap: "100%",
      barMaxWidth: 40,
      itemStyle: {
        color: "#6395F9",
      },
      data: [0, 0, 0],
    },
  ],
});
const option1 = ref({
  title: {
    text: "科研经费入账支出比例",
    left: "center",
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
  },
  legend: {
    left: "center",
    bottom: 0,
    icon: "circle",
    textStyle: {
      color: "#6E7079",
    },
  },
  grid: {
    show: false,
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  },
  tooltip: {
    show: true,
  },
  graphic: {
    elements: [
      {
        type: "text",
        left: "center",
        top: "110",
        style: {
          text: "总",
          textAlign: "center",
          fill: "#333",
          fontSize: 14,
        },
      },
      {
        type: "text",
        left: "center",
        top: "130",
        style: {
          text: "5500元",
          textAlign: "center",
          fill: "#333",
          fontSize: 20,
        },
      },
    ],
  },
  series: [
    {
      name: "入账支出",
      type: "pie",
      radius: ["35%", "50%"],
      color: ["#FFA84A", "#32D9AC"],
      label: {
        show: true,
        formatter: "{d}%",
      },
      labelLine: {
        show: true,
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
        },
      },
      data: [
        { value: 1048, name: "入账" },
        { value: 500, name: "支出" },
      ],
    },
  ],
});

const option3 = ref({
  title: {
    text: "本年度成果统计",
    left: "20%",
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
  },
  legend: {
    type: "scroll",
    pageIconSize: 10,
    pageIconColor: "#666",
    top: 30,
    orient: "vertical",
    left: "right",

    // bottom: 0,
    icon: "circle",
    textStyle: {
      color: "#6E7079",
    },
    // formatter: (name) => {
    //     // 用来格式化图例文本
    //     const value = AchievementNumList.value.find((item) => item.name === name).value;
    //      return `${name}：${value} 个`;
    //    // console.log("eee",name)
    //   },
  },
  grid: {
    show: false,
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  },
  tooltip: {
    show: true,
  },
  graphic: {
    elements: [
      {
        type: "text",
        left: "34%",
        top: "120",
        style: {
          text: "总",
          textAlign: "center",
          fill: "#333",
          fontSize: 14,
        },
      },
      {
        type: "text",
        left: "30%",

        top: "140",
        style: {
          text: "200项",
          textAlign: "center",
          fill: "#333",
          fontSize: 20,
        },
      },
    ],
  },
  series: [
    {
      name: "成果类型",
      type: "pie",
      tooltip: {
        show: true,
        formatter: "{b}：{c}<br />占比：{d}%",
      },
      radius: ["40%", "66%"],
      center: ["35%", "55%"],
      // color: ["#FFA84A", "#32D9AC"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        formatter: "{d}%",
      },
      labelLine: {
        show: true,
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 20,
        },
      },
      data: [
        { value: 1048, name: "论文" },
        { value: 500, name: "专利" },
      ],
    },
  ],
});
const ProjectNumList = ref([]);
const feedata = ref([]);
const AchievementNumList = ref([]);

onMounted(async () => {
  //项目数据
  let CountProjectNumRes = await homeApi.getCountProjectNum();
  if (CountProjectNumRes && CountProjectNumRes.data.length > 0) {
    ProjectNumList.value = CountProjectNumRes.data;
    console.log("ProjectNumList", ProjectNumList.value);
    option.value.xAxis.data = ProjectNumList.value.map((item) => item.projectType);
    option.value.series[0].data = ProjectNumList.value.map((item) => item.count);
  }
  //入账支出
  // let feedataRes= await homeApi.businessCountFee()
  // if(feedataRes&&feedataRes.data.length>0){
  //  feedata.value=feedataRes.data
  //  console.log("feedata=",feedata.value)
  // }
  //成果数量
  let CountAchievementNumListRes = await homeApi.businessCountAchievementNum();
  AchievementNumList.value = CountAchievementNumListRes.data;
  console.log("AchievementNumList=", AchievementNumList.value);
  let total = 0;
  AchievementNumList.value.forEach((item) => {
    total += item.value;
  });
  option3.value.graphic.elements[1].style.text = total + "项";
  option3.value.series[0].data = AchievementNumList.value;
});
</script>

<style scoped lang="scss">
@import url("../index.scss");
</style>
